<template>
    <div>
        <AppItem @add="addStudent"></AppItem>
        <ul>
            <li v-for="name in students" :key="name">
                {{ name }}
            </li>
        </ul>
    </div>
</template>

<script setup>
import AppItem from './components/AppItem.vue';

import { ref } from 'vue';

let students = ref(['张三', '李四', '王二']);

const addStudent = (payload) => {
    students.value.push(payload);
}
</script>
<!-- <script>
import { ref } from 'vue';
import AppItem from './components/AppItem.vue';

export default {
    components: { AppItem },
    setup() {
        let students = ref(['张三', '李四', '王二']);
        const addStudent = (name) => {
            students.value.push(name);
        }
        return {
            students,
            addStudent
        }
    }
}
</script> -->